<template>
  <div id="rankView">
    <div class="g-container">
      <a-row>
        <a-col :span="4">
          <div class="left">
            <div class="avatar" style="background: white; padding: 10px">
              <a-card :bordered="false">
                <template #cover>
                  <div :style="{ height: '204px', overflow: 'hidden', }">
                    <img
                        :style="{ width: '100%', transform: 'translateY(-20px)' }"
                        alt="avatar"
                        :src="userInfo.avatar"
                    />
                  </div>
                </template>
                <a-card-meta :title="userInfo.username">
                  <template #description>
                    <a-space direction="vertical" fill>
                      <a-space>
                        <span>胜</span><span>{{ userInfo.winMatches }}</span>
                        <span>败</span><span>{{ userInfo.loseMatches }}</span>
                        <span>平</span><span>{{ userInfo.totalMatches - (userInfo.loseMatches + userInfo.winMatches) }}</span>
                      </a-space>
                      <a-space>
                        <span>段位</span><span>{{ userInfo.rankName }}</span>
                        <span>积分</span><span>{{ userInfo.score }}</span>
                      </a-space>
                    </a-space>
                  </template>
                </a-card-meta>
              </a-card>
            </div>
            <div class="button" style="text-align: center; margin-top: 10px">
              <a-button type="primary" status="success" @click="showMatchModal">开始匹配</a-button>
            </div>
          </div>
        </a-col>
        <a-col :span="20">
          <div class="right" style="background: white; padding: 10px; margin: 0 0 0 20px">
            <a-card :bordered="false" title="天梯榜">
              <template #extra>
                每隔 1 小时更新榜单
              </template>
              <a-table :columns="columns" :data="rankList" row-class="common-row">
                <template #idx="{ record }">
                  {{record.idx}}
                </template>
                <template #avatar="{ record }">
                  <a-avatar shape="square">
                    <img alt="avatar" :src="record.avatar"/>
                  </a-avatar>
                </template>
                <template #rank="{ record }">
                  <a-tag v-if="record.rankName == PkRankEnum.LEVEL1.text" color="#8C9E7B">{{
                      PkRankEnum.LEVEL1.text
                    }}
                  </a-tag>
                  <a-tag v-else-if="record.rankName == PkRankEnum.LEVEL2.text" color="#E0E5EC">{{
                      PkRankEnum.LEVEL2.text
                    }}
                  </a-tag>
                  <a-tag v-else-if="record.rankName == PkRankEnum.LEVEL3.text" color="#FFD700">{{
                      PkRankEnum.LEVEL3.text
                    }}
                  </a-tag>
                  <a-tag v-else-if="record.rankName == PkRankEnum.LEVEL4.text" color="#A0E6FF">{{
                      PkRankEnum.LEVEL4.text
                    }}
                  </a-tag>
                  <a-tag v-else-if="record.rankName == PkRankEnum.LEVEL5.text" color="#C21807">👑{{
                      PkRankEnum.LEVEL5.text
                    }}
                  </a-tag>
                </template>
                <template #score="{ record }">
                  <a-tag color="green">{{ record.score }}</a-tag>
                </template>
                <template #username="{ record }">
                  <a-link href="#">{{ record.username }}</a-link>
                </template>
              </a-table>
            </a-card>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-modal v-model:visible="matchingModalShow"
             :simple="true"
             :closable="true"
             :align-center="false"
             :footer="false"
             :top="20"
             :hide-title="true"
             :modal-style="{width: '80vw', height: '80vh', background: 'rgba(0, 0, 0, 0.6)', padding: '0'}">
      <PkView />
    </a-modal>
  </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import {PkRankEnum} from "../../common/enums/pk.js";
import PkView from "./PkView.vue";
import { UserScoreControllerService} from "../../apis/index.js";
import {Message} from "@arco-design/web-vue";

const userInfo = ref({})
const rankList = ref([])
const columns = [
  {
    title: '排名',
    slotName: 'idx',
  }, {
    title: '头像',
    slotName: 'avatar',
  }, {
    title: '昵称',
    slotName: 'username',
  }, {
    title: '宣言',
    dataIndex: 'description',
  }, {
    title: '段位',
    slotName: 'rank',
  }, {
    title: '积分',
    slotName: 'score',
  }];
const matchingModalShow = ref(false);
const page = {
  pageNum: 1,
  pageSize: 10,
}

const showMatchModal = () => {
  matchingModalShow.value = true;
}
const getData = async () => {
  let res = await UserScoreControllerService.getUserScore();
  if (res.code === 200) {
    userInfo.value = res.data;
  } else {
    Message.error(res.msg);
  }
  res = await UserScoreControllerService.getRanking({
    ...page
  });
  if (res.code === 200) {
    rankList.value = res.data.records;
    rankList.value.forEach((x, idx) => {
      x.idx = idx + 1;
    })
  } else {
    Message.error(res.msg);
  }
}
onMounted(() => {
  getData();
})
</script>

<style scoped>
</style>
